<template>
  <view>
    <view class="u-row" style="padding-bottom: 36px;" v-if="order">
      <view style="font-size: 16px;margin: 10px;">订单信息</view>
      <view class="text-wrapper_3" @click="copyHandle(order.order_no)">
        <text class="text_10">订单号：</text>
        <text decode="true" class="text_11">{{ order.order_no }}
          <img src="/static/copybtn.png" class="copy-btnicon">
        </text>
      </view>
      <view class="text-wrapper_3" @click="copyHandle(order.create_time)">
        <text class="text_10">下单时间：</text>
        <text decode="true" class="text_11">{{ order.create_time }}<img src="/static/copybtn.png" class="copy-btnicon">
        </text>
      </view>
      <view class="text-wrapper_3" @click="copyHandle(order.status_text)">
        <text class="text_10">状态：</text>
        <text decode="true" class="text_11">{{ order.status_text }}<img src="/static/copybtn.png" class="copy-btnicon">
        </text>
      </view>
      <view class="text-wrapper_3" @click="copyHandle(order.pay_money)">
        <text class="text_10">付款金额：</text>
        <text decode="true" class="text_11">￥{{ order.pay_money }}<img src="/static/copybtn.png" class="copy-btnicon">
        </text>
      </view>
      <view style="background: #f5f5f5;height: 1px;width: 100%"></view>
      <view style="font-size: 16px;margin: 10px;">{{ order.appfuns ? order.appfuns.name : '' }}</view>
      <view class="text-wrapper_3" v-for="(itemapp,inkk) in order.formappa" :key="inkk">
        <text class="text_10">{{ itemapp.title }}：</text>
        <text decode="true" @click="copyHandle(itemapp.value)" class="text_11">{{ itemapp.value }}<img
            src="/static/copybtn.png" class="copy-btnicon"></text>
      </view>
      <view class="sure-btm" v-if="order.status==1" @tap.stop="sureChargeshow(order)">
        <text style="color:#fff;">确认完成</text>
      </view>
    </view>

    <view class="cu-modal " :class="modalName=='bottomModal'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white">
          <view class="action text-blue" @tap="hideModal">取消</view>
        </view>
        <view class="padding-xl">
          <view class="title">上传图片</view>
          <view class="bg flexJA flexFs">
            <view class="bg flexJA flexFs">
              <view class="image" v-if="sureform.overimg">
                <img style="width: 70px;" :src="imgList[0]"/></view>
                <view class="image" @tap="ChooseImage">
                  <img style="width: 70px;" src="/static/index/image/52.png">
                </view>
            </view>
          </view>
        </view>
        <view >
          <button size="default" @click.stop="sureCharge" type="default"
                  style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
                  hover-class="is-hover">确认完成
          </button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {
  config
} from "@/utils/config.js"

export default {
  filters: {
    typeText: function (type) {
      var ar = {
        weixin: "微信支付",
        alipay: "支付宝支付",
        cash: "现金",
      };
      return ar[type];
    },
    datetime: function (value) {
      if (value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
        var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
        var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
        var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
        var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
        var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
        //修改月份格式
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        //修改日期格式
        if (day >= 0 && day <= 9) {
          day = "0" + day;
        }
        //修改小时格式
        if (hours >= 0 && hours <= 9) {
          hours = "0" + hours;
        }
        //修改分钟格式
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        //修改秒格式
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        //格式(yyyy-mm-dd hh:mm:ss)
        var currentFormatDate =
            year +
            "-" +
            month +
            "-" +
            day +
            " " +
            hours +
            ":" +
            minutes +
            ":" +
            seconds;
        return currentFormatDate;
      } else {
        return "-";
      }
    },
  },
  data() {
    return {
      modalName: '',
      order_id: "",
      order_no: "",
      order: {pay_money: ''},
      sureform: {
        order_id: 0,
        overimg: '',
        showoverimg: ''
      },
      imgList: []
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.order_id = option.order_id;
    this.orderinfoQuery();
  },
  methods: {
    hideModal(){
      this.modalName=''
    },
    sureChargeshow(option) {
      console.log(option,'>>>>')
      const that = this
      this.sureform.order_id = option.id;
      this.sureform.overimg = ''
      that.modalName = 'bottomModal'
    },
    sureCharge() {
      if (this.sureform.overimg == '') {
        uni.showToast({
          title: '请上传图片',
          icon: 'error',
          duration: 3000
        });
        return false;
      }
      const that = this
      this.$api.upstatus({
        'status': 2,
        'action': 'status',
        'order_id': this.order_id,
        'overimg': this.sureform.overimg
      }).then(res => {
        const result = res.data
        that.modalName = ''
        uni.showToast({
          title: res.msg ? res.msg : '数据提交成功',
          duration: 3000
        });
        that.getorderlist()
      })
    },
    async orderinfoQuery() {
      const {data} = await this.$api.orderDetail({
        order_id: this.order_id,
      });
      this.order = data;
    },

    ChooseImage() {
      const that = this
      let apiurl = config.apiBaseUrl
      uni.chooseImage({
        count: 4, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          const userInfo = uni.getStorageSync("userinfo")
          uni.uploadFile({//将本地资源上传到开发者服务器
            url: apiurl + '/api/ajax/upload', //接口地址
            filePath: res.tempFilePaths[0],//图片地址
            name: 'file',
            header: {
              ba_user_token: userInfo.token,
              bausertoken: userInfo.token,
            },
            formData: {
              ba_user_token: userInfo.token,
              bausertoken: userInfo.token,
              server: 1
            },
            success: (uploadFileRes) => {
              let data = JSON.parse(uploadFileRes.data)
              let result = data.data
              if (data.code == 1) {
                that.imgList = [result.file.full_url];
                that.sureform.overimg = result.file.url;//上传成功后返回的图片地址
              }
            }
          });
        }
      });
    },
    copyHandle(copystr) {
      uni.setClipboardData({
        data: copystr,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "success",
            duration: 1000
          })
        }
      });

    },
    refundHanle(product) {
      const that = this
      uni.showModal({
        title: "",
        content: '确认要退款么？',
        confirmText: "确认",
        success: function (res) {
          if (res.confirm) {
            that.orderReturn(product)
          }
        }
      })
    },
    async orderReturn(product) {
      const sendparams = {
        order_product_id: product.pigcms_id,
        order_product_num: product.pro_num,
        return_money: product.pro_num * product.pro_price,
        return_point: 0,
        all_refund: 1,
      }
      const res = await this.$api.orderReturn(sendparams)
      if (res) {
        uni.showToast({
          title: "退款成功",
          icon: "success",
          duration: 4000
        })
        this.orderinfoQuery()
      }
    }
  },
};
</script>
<style scope lang="scss">
.cu-modal{
  z-index: 6;
}
.text-wrapper_3 {
  font-size: 14px;
  margin: 10px;
  display: flex;
  justify-content: space-between;

  .text_10 {
    color: #a7a6a6;
    font-weight: 400;
  }
}

.item-static {
  width: 100%;
  margin: 15px;
}

.item-line {
  width: 33%;
  display: inline-block;
}

.u-image {
  height: 180rpx !important;
}

.paymoney {
  float: right;
  color: red;
  font-size: 32rpx;
  margin-top: -6px;
}

.u-search__content .u-icon__icon {
  font-size: 24px !important;
}

.paymoney1 {
  color: #3c9cff;
}

.paymoney2 {
  color: #eaa135;
}

.paymoney3 {
  color: #eaa135;
}

.row-line1 .u-cell:nth-child(4) .u-cell__value {
  color: #3c9cff !important;
}

.row-line2 .u-cell:nth-child(4) .u-cell__value {
  color: #eaa135 !important;
}

.row-line3 .u-cell:nth-child(4) .u-cell__value {
  color: #eaa135 !important;
}

.row-con {
  padding: 5px;
}

.row-line1 {
}

.u-row {
  border: 1px solid #ffffff;
  border-radius: 11px;
  background: #ffffff;
  // box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.3);
  margin: 0.5rem;
  position: relative;
  font-size: 0.7rem;
  border-radius: 0.5rem;
  padding-bottom: 20px;
  box-shadow: 0px 1px 2px 1px rgba(219, 214, 214, 81);
}
</style>

<style lang="scss">
.sure-btm {
  width: 80px;
  padding: 5px 10px;
  border-radius: 5px;
  color: #ffffff;
  text-align: center;
  background: #2d9082;
  float: right;
  margin-right: 10px;
}

.copy-btnicon {
  width: 14px;
  margin-left: 10px;
}

.refund-btn {
  float: right;
  line-height: 26px;
  justify-content: end;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #807b7b;
}

.u-page {
  padding: 40rpx 0px;

  &__top-box {
    padding-left: 40rpx;
  }
}

.u-tag__icon .u-icon__icon {
  font-size: 10px !important;
  color: #606266 !important;
}

.u-tag-wrapper .u-tag {
  border: none !important;
  margin: 0 auto;
  text-align: center;
}

.empty-select {
  margin-top: 10px;
}

.u-tag__text--primary--plain {
  color: #606266 !important;
}

.row-title-view {
  border-bottom: 1px solid #ececec;
  font-weight: normal;
  height: 49px;
  line-height: 49px;
  padding: 0 16px;
}

.cell-page {
  padding-bottom: 20px;
}

.u-cell-group__title__text {
  font-weight: 600;
  font-size: 20px !important;
}

.u-cell {
  height: 25px;

  .u-cell-text {
  }
}

.u-button--small {
  min-width: 60px;
  height: 24px !important;
  margin-left: 10px;
  padding: 0px 8px;
  font-size: 12px;
}

.bind-view {
  margin: 10px;
  margin-top: 28rpx;
}

.u-button {
  border-radius: 8px !important;
  float: right;
  width: 20px !important;
}

.cell-box {
  &__title {
    font-size: 14px;
    color: rgb(143, 156, 162);
    margin: 20px 0px 0px 15px;
  }

  &__block {
    // background-color: #fff;
    margin-top: 20px;
  }
}


.u-slot-title {
  flex-direction: row;
  align-items: center;
}

.u-cell-text {
  font-size: 15px;
  line-height: 22px;
  color: #303133;
  margin-right: 5px;
}

.u-slot-value {
  line-height: 17px;
  text-align: center;
  font-size: 10px;
  padding: 0 5px;
  height: 17px;
  color: #ffffff;
  border-radius: 100px;
  background-color: #f56c6c;
}

.redmoney {
  color: red;
}

.status-color1 {
}

.status-color2 {
  color: #bdb6b6;
}

.status-color3 {
  color: red;
}
</style>
